<template>
  <div class="file-list-wrapper">
    <!-- 文件列表-表格模式 -->
    <DepartmentTable
        :dataList="dataList"
        :loading.sync="loading"
        @getTableData="getTableData"
    ></DepartmentTable>
  </div>
</template>

<script>

import DepartmentTable from '_c/common/DepartmentTable.vue'

import {
  getDepartmentTree
} from '_r/department.js'

export default {
  name: 'Department',
  components: {
    DepartmentTable,
  },
  data() {
    return {
      loading: true, //  表格数据-loading
      dataList: [], //  表格数据-文件列表
    }
  },
  computed: {
    // 屏幕宽度
    screenWidth() {
      return this.$store.state.common.screenWidth
    }
  },
  watch: {

  },
  created() {
    this.getTableData()
  },
  methods: {

    /**
     * 表格数据获取相关事件 | 获取文件列表数据
     */
    getTableData() {
      this.loading = true
      this.showDataList()
      this.$store.dispatch('showStorage')
    },
    /**
     * 表格数据获取相关事件 | 获取当前路径下的文件列表
     */
    showDataList() {
      let data = {
      }
      getDepartmentTree(data).then((res) => {
        if (res.success) {
          this.dataList = res.data
          this.loading = false
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~_a/styles/varibles.styl';

.file-list-wrapper {
  >>> .el-header {
    padding: 0;
  }

  .middle-wrapper {
    margin-bottom: 8px;
  }

  .pagination-wrapper {
    position: relative;
    border-top: 1px solid $BorderBase;
    height: 44px;
    line-height: 44px;
    text-align: center;

    .current-page-count {
      position: absolute;
      left: 16px;
      height: 32px;
      line-height: 32px;
      font-size: 13px;
      color: $RegularText;
    }
  }
}
</style>
